<template>
  <div class="app-container  course postscript">
    <div class="edit-title-line">基本信息</div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">备课标题：</div>
        <div class="ele-form-content">{{limitTitleLength(courseDetail.title)}}</div>
      </div>
      <div class="ele-form-item">
        <div class="ele-form-label">创建人：</div>
        <div class="ele-form-content">{{courseDetail.createBy}}</div>
      </div>
      <div class="ele-form-item">
        <div class="ele-form-label">学科：</div>
        <div class="ele-form-content">{{courseDetail.subjectName}}</div>
      </div>
      <div class="ele-form-item">
        <div class="ele-form-label">年级：</div>
        <div class="ele-form-content">{{courseDetail.gradeName}}</div>
      </div>
      <div class="ele-form-item">
        <div class="ele-form-label">班级：</div>
        <div class="ele-form-content">{{courseDetail.classNameList.join(",")}}</div>
      </div>
    </div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">标题：</div>
        <div class="ele-form-content">{{courseDetail.postscriptTitle}}</div>
      </div>
      <div class="ele-form-item">
        <div class="ele-form-label">最新编辑时间：</div>
        <div class="ele-form-content">{{courseDetail.updateAt}}</div>
      </div>
    </div>
    <div class="edit-title-line">后记内容</div>
    <div v-html="courseDetail.postscriptContent"> </div>
    <!--<div style="margin-top: 20px">-->
      <!--<el-button type="primary" style="margin-right: 20px"  @click="$router.go(-1)">返回</el-button>-->
    <!--</div>-->
  </div>
</template>

<script>
  import {getPostscriptDetail, getPlLessonDetail} from '@/api/api.js'
  export default {
    name: "postscriptDetail",
    components: {
    },
    data () {
      return {
        cancelConfirm: false,
        courseDetail: {
          title: '',
          createName : '',
          subjectName : '',
          gradeName: '',
          classNameList : [],
          postscriptTitle : '',
          updateAt : '',
          postscriptContent : ''
        },
        noPostScriptContent: false,
        subjectTypeList: [],
        addPostScriptForm : {
          postscriptTitle: '', //后记标题
          postscriptContent: ''
        },
        addPostScriptFormRules :{
          postscriptTitle : [
            { required: true, message: '必填项，请填写！', trigger: 'blur' },
            { max: 30, message: '最多 30 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      formatSubjectByType(code) {
        for (let item of this.subjectTypeList) {
          if (item.code === code ) {
            return item.label;
          }
        }
        return "";
      },
      formatClassList(classList) {
        if (classList instanceof Array) {
          return classList.join("、")
        }
        return classList
      },
      //标题长度限制
      limitTitleLength(title) {
        if (!title) {
          return ""
        } else if (title.length <= 10) {
          return title
        } else {
          let tempTitle = title.substr(0, 10)
          return `${tempTitle}……`
        }
      },
      //获取后记详情
      getPostScriptDetail() {
        let postscriptId = this.$route.query.postscriptId
        let lessonId = this.$route.query.lessonId
        if (!postscriptId) {
          this.$message.error("缺少参数")
          this.$router.go(-1)
        }
        let params = {
          lessonId : lessonId,
          postscriptId : postscriptId
        }
        getPostscriptDetail(params).then(res => {
          if (res.code == 200) {
            this.courseDetail.postscriptTitle = res.result.title
            this.courseDetail.updateAt = res.result.updateAt
            this.courseDetail.postscriptContent = res.result.content
          } else {
            this.$alert("获取后记详情失败！" + res.message, "错误", {type : "error"})
          }
        })
      },
      formatClassNameList(classNameList) {
        if (!classNameList || !Array.isArray(classNameList)) {
          return []
        }
        let tempClassNameArr = []
        classNameList.forEach(item => {
          tempClassNameArr.push(`${item.classCode}班`)
        })
        return tempClassNameArr
      },
      getPlLessonDetail() {
        let lessonId = this.$route.query.lessonId
        let params = {
          plLessonId : lessonId
        }
        getPlLessonDetail(params).then(res => {
          if (res.code == 200) {
            this.courseDetail.title = res.result.title
            this.courseDetail.createBy = res.result.createName
            this.courseDetail.subjectName = res.result.subjectName
            this.courseDetail.gradeName = ( res.result.classList && Array.isArray(res.result.classList) && res.result.classList.length > 0) ?  res.result.classList[0].gradeName : ''
            this.courseDetail.classNameList =  ( res.result.classList && Array.isArray(res.result.classList) && res.result.classList.length > 0) ? this.formatClassNameList(res.result.classList) : []
          } else {
            this.$alert("获取后记详情失败！" + res.message, "错误", {type : "error"})
          }
        })
      }
    },
    mounted () {
      this.getPostScriptDetail()
      this.getPlLessonDetail()
    },
    created() {

    }
  }
</script>
<style scoped>

</style>
